<template>
    <div class="peopleAbnormal-box">
        <div style="display: flex; justify-content: space-between;">
            <div>居民指标异常</div>
            <div style="color: #999; font-size: 13px;">全部></div>
        </div>

        <ul>
            <li v-for="(item, index) in getPeopleAbnormalData" :key="index">
                <img :src="'http://127.0.0.1:3000/' + item.picture" alt="">
                <div class="abnormal-msg">
                    <span style="font-size: 18px;
                     margin: 0 10px;">{{ item.name }}</span>
                    <span style="font-size: 12px;
                    color: #999;">{{ item.age }}岁</span>
                    <span v-if="item.gender === '0'">
                        <el-icon>
                            <Male />
                        </el-icon>
                    </span>
                    <span v-if="item.gender === '1'">
                        <el-icon>
                            <Female />
                        </el-icon>
                    </span>
                </div>
                <div class="abnormal-smallBox">
                    <span class="abnormal-icon">!</span>
                    <span class="abnormal-title">{{ item.title }}</span>
                </div>
                <div>
                    <el-button class="abnormal-btn" type="primary">查看详情</el-button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import api from '@/api'

const getPeopleAbnormalData = ref<any>({})
const getPeopleAbnormalList = async () => {
    const result = await api.workbench.getPeopleAbnormalApi()
    // console.log('getPeopleAbnormalList', result.data.data);
    getPeopleAbnormalData.value = result.data.data
}

getPeopleAbnormalList()
</script>

<style lang='scss' scoped>
.peopleAbnormal-box {
    width: 770px;
    height: 460px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;

    ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 35px;

        :hover {
            cursor: pointer;
            background-color: rgba($color: black, $alpha: .1);
        }

        li {
            list-style: none;
            width: 230px;
            height: 290px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);



            img {
                width: 84px;
                height: 84px;
                border-radius: 50%;
            }

            .abnormal-msg {
                margin: 10px;

                :last-child {
                    font-size: 15px;
                    color: green;
                }
            }

            .abnormal-smallBox {
                display: flex;
                align-items: center;
                height: 35px;

                .abnormal-icon {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    background-color: rgba($color: red, $alpha: .5);
                    border-radius: 50%;
                    font-size: 12px;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;
                }

                .abnormal-title {
                    font-size: 13px;
                    color: rgba($color: red, $alpha: .5);
                }
            }

            .abnormal-btn {
                width: 120px;
                height: 35px;
                font-size: 13px;
            }
        }
    }
}
</style>